<template>
  <div class="banking-card">
    <van-nav-bar title="提现管理" left-arrow @click-left="$router.back()" />
    <van-tabs v-model="active" line-width="80px" @click="deng">
      <van-tab title="银行卡管理" name="a">
        <Bankingcard @dengzhifang="yinghangka" :indexs="index">
          <template #one> 绑定银行卡 </template>
          <template #tow> 招商银行 </template>
          <template #name> 刘**** </template>
        </Bankingcard>
      </van-tab>
      <van-tab title="USDT管理" name="b">
        <Bankingcard @dengzhifang="usdtdizhi" :indexs="index">
          <template #one> 绑定USDT账户 </template>
          <template #tow> 泰达币（USDT） </template>
          <template #name> 账户一 </template>
        </Bankingcard>
      </van-tab>
    </van-tabs>
    <!-- 弹层 -->
    <!-- 图标位置 -->
    <van-popup
      v-model="show"
      close-icon-position="top-left"
      position="top"
      :style="{ height: '100%' }"
    >
      <van-nav-bar title="绑定银行卡" left-arrow @click-left="show = false" />
      <!-- 表单 -->
      <van-form @submit="onSubmit">
        <div class="title">开户姓名</div>
        <van-field
          v-model="username"
          name="请输入银行卡开户姓名"
          placeholder="请输入银行卡开户姓名"
        />
        <div class="title">银行卡号</div>
        <van-field
          v-model="username"
          name="请输入正确的银行卡卡号"
          placeholder="请输入正确的银行卡卡号"
        />
        <div class="title">开户银行</div>
        <van-field
          v-model="username"
          name="请选择开户银行"
          placeholder="请选择开户银行"
        />
        <div class="title">开户地区</div>
        <van-field
          v-model="username"
          name="请选择开户地区"
          placeholder="请选择开户地区"
        />
        <div class="title">支行名称</div>
        <van-field
          v-model="password"
          name="请输入开户行支行名称"
          placeholder="请输入开户行支行名称"
        />
        <p class="kefu">
          请认真校对银行卡卡号，有疑问请咨询<span>在线客服</span>
        </p>
        <div style="margin: 16px">
          <van-button
            block
            type="info"
            native-type="submit"
            color="linear-gradient(to right, #FA7D22, #FA461B)"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>

    <van-popup
      v-model="isshow"
      close-icon-position="top-left"
      position="top"
      :style="{ height: '100%' }"
    >
      <van-nav-bar
        title="绑定USDT账户"
        left-arrow
        @click-left="isshow = false"
      />
      <!-- 表单 -->
      <van-form @submit="onSubmit">
        <div class="title">USDT地址</div>
        <van-field
          v-model="username"
          name="请输入银行卡开户姓名"
          placeholder="请输入银行卡开户姓名"
        />

        <div class="title">银行卡号</div>
        <van-field
          v-model="username"
          name="资金密码"
          placeholder="请输入正确的银行卡卡号"
        />

        <p class="kefu">
          请认真校对USDT账户，有疑问请咨询<span>在线客服</span>
        </p>
        <div style="margin: 16px">
          <van-button
            block
            type="info"
            native-type="submit"
            color="linear-gradient(to right, #FA7D22, #FA461B)"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
import Bankingcard from "./components/bankingCard.vue";
export default {
  components: {
    Bankingcard,
  },
  data() {
    return {
      active: 2,
      show: false,
      isshow: false,
      username: "",
      password: "",
      index: "a",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    yinghangka(type) {
      this.show = type;
    },
    usdtdizhi(type) {
      this.isshow = type;
    },
    deng(name) {
      console.log(name);
      this.index = name;
    },
  },
};
</script>
<style scoped lang="less">
.kefu {
  text-align: center;
  color: #a5a9b3;
  span {
    color: red;
  }
}
.title {
  margin: 60px 0 52px 40px;
}
</style>
